<template>
    <div class="trend-item">
        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="流程效率趋势">
                <div class="data-ctn" id="main_trend_1">
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="流程数量趋势">
                <div class="data-ctn" id="main_trend_2">
                </div>
            </a-tab-pane>
        </a-tabs>

    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getAction } from '@/api/manage';
export default {
    data() {
        return {
            xAxisOption: [],
            completeCount: [],
            completeTime: [],
            initiateCount: [],
            progressingCount: []
        }
    },
    created() {

    },
    async mounted() {
        await this.init()
        
    },
    methods: {
        // 初始化
        init() {
            getAction('/api/erpmng/sys/bpm/report/board/efficiencyTrend').then(res => {
                let result = res.result
                result.forEach(it => {
                    this.xAxisOption.push(it.month)
                    this.completeCount.push(it.completeCount)
                    this.completeTime.push(it.completeTime)
                    this.initiateCount.push(it.initiateCount)
                    this.progressingCount.push(it.progressingCount)
                });
                this.$nextTick(()=>{
                     this.render_1()
                })
            })
        },
        // 点击切换
        callback(val) {
            this.$nextTick(() => {
                this[`render_${val}`]()
            });
        },

        render_1() {
            var chartDom = document.getElementById('main_trend_1');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                color:['#1296db','#ff7407'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // type: 'cross',
                        label: {
                            backgroundColor: '#283b56'
                        }
                    }
                },
                legend: {},
                toolbox: {
                    show: false,
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: {
                    show: false,
                    start: 0,
                    end: 100
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: this.xAxisOption,

                    },

                ],
                // yAxis: {
                //     type: 'value'
                // },
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        name: '结束流程数（个）',
                        max: 'dataMax',
                        min: 0,
                        alignTicks: true,
                        axisLine: {
                            show: true,
                        },
                    },
                    {
                        type: 'value',
                        name: '平均运行时长（小时）',
                        max: 'dataMax',
                        min: 0,
                        alignTicks: false,
                        axisLine: {
                            show: true,
                        },
                        splitLine: {
                            show: false
                        },
                    }
                ],
                series: [
                    {
                        data: this.completeCount,
                        type: 'bar',
                        name: "结束流程数（个）",
                    },
                    {
                        data: this.completeTime,
                        type: 'line',
                        name: '平均运行时长（小时）',
                        yAxisIndex: 1,
                    }
                ],
                barWidth: '50px'

            };

            option && myChart.setOption(option);

        },
        render_2() {
            var chartDom = document.getElementById('main_trend_2');
            var myChart = echarts.init(chartDom);
            var option;
            

            option = {
                color:['#366bf3','#ff7407','#1296db'],
                title: {
                    text: '123',
                    show: false,
                },
                tooltip: {
                    trigger: 'axis',

                },
                legend: {
                    data: ['未结束流程数', '结束流程数', '发起流程数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.xAxisOption
                },
                yAxis: {
                    type: 'value',
                    name: '数量（个）',
                },
                series: [
                    {
                        name: '未结束流程数',
                        type: 'line',
                        data: this.progressingCount,
                        
                    },
                    {
                        name: '结束流程数',
                        type: 'line',
                        data: this.completeCount,
                       
                    },
                    {
                        name: '发起流程数',
                        type: 'line',
                        data: this.initiateCount,
                    },

                ]
            };

            option && myChart.setOption(option);
        },
    },
}
</script>

<style lang="less" scoped>
.trend-item {
    background-color: #fff;
    padding: 5px 10px;

    .data-ctn {
        height: 200px;
        width: 100%;

    }
}
</style>